<template>
    <div>
        <div class="add_title"><b>账号列表</b></div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="创建时间" align="center">
                <template #default="scope">
                    <div>
                        <span style="margin-left: 10px">{{ scope.row.createtime }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="名称" align="center">
                <template #default="scope">
                    <el-popover effect="light" trigger="hover" placement="top" width="auto">
                        <template #default>
                            <div>名称: {{ scope.row.name }}</div>
                            <div>密码: {{ scope.row.password }}</div>
                        </template>
                        <template #reference>
                            <el-tag>{{ scope.row.name }}</el-tag>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="账号" align="center">
                <template #default="scope">
                    <div>
                        <span style="margin-left: 10px">{{ scope.row.tel }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="用户组" align="center">
                <template #default="scope">
                    <div>
                        <span style="margin-left: 10px">{{ scope.row.region }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 修改弹窗 -->
        <el-dialog v-model="dialogFormVisible" title="修改账号和密码" width="500">
            <el-form :model="form">
                <el-form-item label="账号">
                    <el-input v-model="form.account" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="clickEdit">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
// 引入
import { $_querystaff, $_updatestaff, $_deletestaff } from '@/apis/shop'
import { UseuserInfo } from "@/store/user.js";
import { ref, reactive } from "vue";


//变量和常量
let { userInfo } = UseuserInfo()
let shopid = userInfo.sid
const tableData = ref([])
const dialogFormVisible = ref(false)
const form = reactive({
    account: '',
    password: '',
})
const accInfo = ref({
    mid: '',
    acc: '',
    pwd: '',

})



//函数方法

//查询账号列表
const queryList = () => {
    $_querystaff({ shopid }).then(res => {
        for (const item of res.data) {
            item.region = item.region == 1 ? '管理员' : '普通员工'
            item.createtime = dayjs(item.createtime).format('YYYY-MM-DD HH:mm:ss')
        }
        tableData.value = res.data
    })
}
queryList()


const handleEdit = (index, row) => {
    console.log(index, row)
    form.account = row.tel
    form.password = row.password
    accInfo.value.mid = row.mid
    dialogFormVisible.value = true

}
//修改确定
const clickEdit = () => {
    accInfo.value.acc = form.account,
        accInfo.value.pwd = form.password,
        dialogFormVisible.value = false
    $_updatestaff(accInfo.value).then(res => {
        if (res.success) {
            queryList()
        }
    })
}
// 删除
const handleDelete = (index, row) => {
    console.log(index, row)
    ElMessageBox.confirm(
        '确定删除该账号吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            $_deletestaff({ mid: row.mid }).then(res => {
                console.log(res);
                if (res.success) {
                    queryList()

                }
            })
        })
}

</script>

<style lang="scss" scoped>
.add_title {
    margin-bottom: 24px;
}
</style>